﻿@{
    ViewBag.CurrentMenu = "User";
}


<div class="breadcrumbs ace-save-state" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="~/Home/Index">首页</a>
        </li>
        <li>
            <a href="#">系统管理</a>
        </li>
        <li class="active">用户管理</li>
    </ul>

</div>
<div class="row">
    <div class="col-xs-12">
        <h3 class="row header smaller lighter blue">
            <dic class="col-sm-7">

            </dic><!-- /.col -->
            <dic class="col-sm-5">
                <label class="pull-right inline">
                    <button id="btnAdd" class="btn btn-sm btn-primary" type="button" data-original-title="新增用户" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增
                    </button>

                    <button id="btnEdit" class="btn btn-sm btn-primary" type="button" data-original-title="编辑用户" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-edit"></i>&nbsp;&nbsp;编辑
                    </button>

                    <button id="btnDelete" title="" class="btn btn-sm btn-danger" type="button" data-original-title="删除用户" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-times"></i>&nbsp;&nbsp;删除
                    </button>
                </label>
            </dic><!-- /.col -->
        </h3>
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info">
            <thead>
                <tr role="row">
                    <th class="table-checkbox" style="width:40px;text-align:center;"><input id="checkAll" class="group-checkable" type="checkbox"></th>
                    <th tabindex="0" aria-label="">
                        序号
                    </th>
                    <th tabindex="0" aria-label="">
                        用户名
                    </th>
                    <th tabindex="0" aria-label="">
                        用户姓名
                    </th>
                    <th tabindex="0" aria-label="">
                        邮箱地址
                    </th>
                    <th tabindex="0" aria-label="">
                        手机号
                    </th>
                    <th tabindex="0" aria-label="">
                        备注
                    </th>
                    @*<th tabindex="0" style="width: 230px;" aria-label="">
                        操作
                    </th>*@
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
        <div id="grid_paging_part" style="margin:5px 0 5px 0;"></div>        
    </div>
</div>


@Html.Partial("Edit")
<script>
    var selectedId = -1;
    var pageSize = 10;


   
    $(function () {
        $(document).attr("title", "用户");
        $("#btnAdd").click(function () { Add(); });
        $("#btnSave").click(function () { Save(); });
        $("#btnEdit").click(function () { Edit(this); });
        $("#btnDelete").click(function () { DeleteMulti(); });
        $("#checkAll").click(function () { CheckAll(this) });
        LoadTables(1, 10);
    });
    //全选
    function CheckAll(obj) {
        $(".checkboxs").each(function () {
            if (obj.checked == true) {
                $(this).prop("checked", true)

            }
            if (obj.checked == false) {
                $(this).prop("checked", false)
            }
        });
    };

    //加载用户列表数据
    function LoadTables(startPage, pageSize) {
        $("#tableBody").html("");
        $("#checkAll").prop("checked", false);
        $.ajax({
            type: "GET",
            url: "/AppUser/GetAllUsers?startPage=" + startPage + "&pageSize=" + pageSize + "&_t=" + new Date().getTime(),
            success: function (d) {
                var data = d.data;
                $.each(data.data, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td align='center'><input type='checkbox' class='checkboxs' value='" + item.id + "'/></td>";
                    tr += "<td>" + (i + 1) + "</td>";
                    tr += "<td>" + item.userName + "</td>";
                    tr += "<td>" + (item.name == null ? "" : item.name) + "</td>";
                    tr += "<td>" + (item.email == null ? "" : item.email) + "</td>";
                    tr += "<td>" + (item.mobileNumber == null ? "" : item.mobileNumber) + "</td>";
                    tr += "<td>" + (item.remarks == null ? "" : item.remarks) + "</td>";
                    //tr += "<td><button class='btn btn-info btn-xs' href='javascript:;' onclick='Edit(\"" + item.id + "\")'><i class='fa fa-edit'></i> 编辑 </button> <button class='btn btn-danger btn-xs' href='javascript:;' onclick='DeleteSingle(\"" + item.id + "\")'><i class='fa fa-trash-o'></i> 删除 </button> </td>"
                    tr += "</tr>";
                    $("#tableBody").append(tr);
                })
                var elment = $("#grid_paging_part"); //分页插件的容器id
                
                $("#grid_paging_part").lagerPaper({
                        currentIndex: data.pageIndex,
                        pageSize: pageSize,
                        totalCount: data.allCount,
                        pageCount: data.pageCount,
                        onPageChanged: function (e, pageIndex) {

                            LoadTables(pageIndex, 10);
                        }
                    });
                
                LoadRoles(data);
            }
        })
    };
    function LoadRoles(data) {
        $("#Role").select2();
        var option = "";
        $.each(data.roles, function (i, item) {
            option += "<option value='" + item.id + "'>" + item.name + "</option>"
        })
        $("#Role").html(option);
    }
    //新增
    function Add() {
        //弹出新增窗体
        var dialog = $("#editModal").removeClass('hide').dialog({
            modal: true,
            title: '编辑用户',
            title_html: false,
            width: 650,
            height: 520

        });

        $("#Id").val(-1);
        $("#UserName").val("");
        $("#UPassword").val("");
        $("#Name").val("");
        $("#EMail").val("");
        $("#MobileNumber").val("");
        $("#Remarks").val("");
        $("#Role").select2("val", "");
        $("#Title").text("新增用户");
       
    };
    //编辑
    function Edit(selector) {
        var ids = [];
        $(".checkboxs").each(function () {
            if ($(this).prop("checked") == true) {
                ids.push($(this).val());
            }
        });
        if (ids.length == 0) {
            layer.tips("请选择要编辑的记录", selector);
            return;
        };
        if (ids.length > 1) {
            layer.tips("不能同时编辑多条记录", selector);
            return;
        }

        $.ajax({
            type: "Get",
            url: "/AppUser/Get?id=" + ids[0] + "&_t=" + new Date().getTime(),
            success: function (d) {
                var dialog = $("#editModal").removeClass('hide').dialog({
                    modal: false,
                    title: '编辑用户',
                    title_html: false,
                    width: 650,
                    height: 520

                });


                var data = d.data;
                $("#Id").val(data.id);
                $("#UserName").val(data.userName);
                $("#UPassword").val(data.uPassword);
                $("#Name").val(data.name);
                $("#EMail").val(data.eMail);
                $("#mobileNumber").val(data.mobileNumber);
                $("#Remarks").val(data.remarks);
                var roleIds = [];
                if (data.userRoles) {
                    $.each(data.userRoles, function (i, item) {
                        roleIds.push(item.roleId)
                    });

                    $("#Role").val(roleIds).trigger("change");

                    //$("#Role").select2("val", roleIds);
                }
               

               


                //$("#editModal").modal("show");
            }
        })
    };
    //保存
    function Save() {
        var roles = "";
        if ($("#Role").val())
            roles = $("#Role").val().toString();
        var postData = { "dto": { "Id": $("#Id").val(), "UserName": $("#UserName").val(), "UPassword": $("#UPassword").val(), "Name": $("#Name").val(), "Email": $("#Email").val(), "MobileNumber": $("#MobileNumber").val(), "Remarks": $("#Remarks").val(), "DepartmentId": selectedId }, "roles": roles };
        $.ajax({
            type: "Post",
            url: "/AppUser/Edit",
            data: postData,
            success: function (d) {
                if (d.success) {
                    LoadTables(1, 10)
                    $(".ui-dialog-titlebar-close").trigger("click");
                } else {
                    layer.tips(d.message, "#btnSave");
                };
            }
        });
    };
    //批量删除
    function DeleteMulti() {
        var ids = "";
        $(".checkboxs").each(function () {
            if ($(this).prop("checked") == true) {
                ids += $(this).val() + ","
            }
        });
        ids = ids.substring(0, ids.length - 1);
        if (ids.length == 0) {
            layer.alert("请选择要删除的记录。");
            return;
        };
        //询问框
        layer.confirm("您确认删除选定的记录吗？", {
            btn: ["确定", "取消"]
        }, function () {
            var sendData = { "ids": ids };
            $.ajax({
                type: "Post",
                url: "/AppUser/DeleteMuti",
                data: sendData,
                success: function (d) {
                    if (d.success) {
                        LoadTables(1, 10)
                        layer.closeAll();
                    }
                    else {
                        layer.alert(d.message);
                    }
                }
            });
        });
    };
    //删除单条数据
    function DeleteSingle(id) {
        layer.confirm("您确认删除选定的记录吗？", {
            btn: ["确定", "取消"]
        }, function () {
            $.ajax({
                type: "POST",
                url: "/AppUser/Delete",
                data: { "id": id },
                success: function (data) {
                    if (data.success) {
                        LoadTables(1, 10)
                        layer.closeAll();
                    }
                    else {
                        layer.alert("删除失败！");
                    }
                }
            })
        });
    };

</script>


